<script>
export default {
  name: 'MissionPage'
}
</script>

<template>
  <div class="content_out">
    <div class="w100 group_title">使命愿景</div>
    <div class="w100 group_en_title">Mission Vision</div>
    <b-container fluid class="contents_start">
      <b-row>
        <b-col lg="4" md="6" sm="12"><div  class="mission_item">
          <div class="left_content">
            <div class="left_title">发展定位</div>
            <div><div class="left_line"></div></div>

            <div class="left_text">新时代城市运营服务商</div>
          </div>

          <div class="right_pic"></div>
        </div></b-col>
        <b-col lg="4" md="6" sm="12"><div  class="mission_item">
          <div class="left_content">
            <div class="left_title">标语</div>
            <div><div class="left_line"></div></div>

            <div class="left_text">与城市 共成就<br />
              启新守正 创投未来</div>
          </div>

          <div class="right_pic"></div>
        </div></b-col>
        <b-col lg="4" md="6" sm="12"><div  class="mission_item">
          <div class="left_content">
            <div class="left_title">集团使命</div>
            <div><div class="left_line"></div></div>

            <div class="left_text">服务城市战略<br />
              共建民生福祉</div>
          </div>

          <div class="right_pic"></div>
        </div></b-col>
        <b-col lg="4" md="6" sm="12"><div  class="mission_item">
          <div class="left_content">
            <div class="left_title">集团愿景</div>
            <div><div class="left_line"></div></div>

            <div class="left_text">成为国际一流<br />
              的城市综合运营服务商</div>
          </div>

          <div class="right_pic"></div>
        </div></b-col>
        <b-col lg="4" md="6" sm="12"><div  class="mission_item">
          <div class="left_content">
            <div class="left_title">价值观</div>
            <div><div class="left_line"></div></div>

            <div class="left_text">重责守信、务实创新、<br />
              真诚奉献</div>
          </div>

          <div class="right_pic"></div>
        </div></b-col>
        <b-col lg="4" md="6" sm="12"><div  class="mission_item">
          <div class="left_content">
            <div class="left_title">集团精神</div>
            <div><div class="left_line"></div></div>

            <div class="left_text">忠诚敬业、自强不息、<br />
              开放进取</div>
          </div>

          <div class="right_pic"></div>
        </div></b-col>
      </b-row>
    </b-container>
  </div>
</template>

<style scoped lang="scss">
.mission_item{
  box-sizing: border-box;
  width:100%;height:157px;margin:10px;
  background: #fff;
  box-shadow: #ccc 0px 0px 4px;
  &:hover{
    background: #b1010c;
    .left_content {
      .left_title{
        color:#fff
      }
      .left_line{
        background:#fff
      }
      .left_text{
        color:#fff
      }
    }
    .right_pic{

    }
  }
  .left_content{
    height:100%;float:left;box-sizing: border-box;padding:23px 10px 23px 50px;width:calc(100% - 133px);
    .left_title{
      width:100%;height:50px;line-height:40px;font-size:1.3rem;color:#b1010c
    }
    .left_line{
      width:60px;height:4px;background:#b1010c;margin:0;margin-bottom:12px;
    }
    .left_text{
      width:100%;height:auto;font-size:1rem;line-height:20px;color:#000000;line-height:160%
    }
  }
  .right_pic{
    width:133px;height:100%;float:right;
  }
}
</style>
